<template>
    <div class="board">
      <div class="title">
        <div class="title-progress" style="width: 100%;">
          <progress-bar :progress="boardProgress"></progress-bar>
        </div>

        <div class="title-info">
          {{data.title}}
        </div>
      </div>

      <div class="task-board">
        <ul style="list-style: none;padding: 0;margin: 0;">
          <task v-for="(task,index) in data.tasks" v-bind:key="task.id" :task="task" :index="index" @updated="handleTaskClick"></task>
          <task-adder></task-adder>
        </ul>
      </div>
    </div>
</template>

<script>
    import ProgressBar from './progress-bar';
    import Task from './task';
    import TaskAdder from './task-adder'

    export default {
        components: {
            'progress-bar': ProgressBar,
            'task': Task,
            'task-adder': TaskAdder
        },
        name: "list",
        data () {
            return {
                boardData: this.data
            }
        },
        props: {
            data: {
                type: Object,
                default:{
                    id: -1,
                    title:'Untitled List',
                    tasks:[]
                }
            }
        },
        computed: {
            boardProgress() {
                let tasks = this.boardData.tasks;
                if(tasks.length === 0) {
                    return 0;
                }

                let progress = 0;
                tasks.forEach( task => {
                    if(task.status === 1) {
                        progress ++;
                    }
                });
                return Math.ceil(100 * (progress/tasks.length));
            }
        },
        methods : {
            handleTaskClick(newTask, index)
            {

            }
        }
    }
</script>

<style scoped>
  .board {
    text-align: left;
    width: 300px;
    min-height: 100px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 20px;
  }

  .title {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .title .title-info{
    width: 100%;
    font-size: 0.9em;
    text-align: center;
    line-height: 25px;
    font-weight: bolder;
  }

  .task-board {
    padding: 0 10px;
  }
</style>
